<template>
  <div class="container">
    <div class="con">

      <h4>基础设置</h4>
      <div class="basic">
        <p>
          <span>是否开启充值：</span>
          <el-radio-group v-model="set.is_recharge">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </p>
        <p>
          <span>是否开启提现：</span>
          <el-radio-group v-model="set.is_withdrawal">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
         </p>
        <p>
        <p>
          <span>最低提现金额（元）：</span>
          <el-input v-model="set.withdrawal_min_price" :min="0" :max="100" type="number" size="large" placeholder="请输入内容" style="width:50%" />
        </p>
        <p>
          <span>提现手续费（%）：</span>
          <el-input v-model="set.withdrawal_fee_ratio" :min="0" :max="100" type="number" size="large" placeholder="请输入内容" style="width:50%" />
        </p>
        <p>
          <span>APP公告：</span>
          <el-input v-model="set.contents"  type="text" size="large" placeholder="请输入内容" style="width:50%" />
        </p>
        <p>
          <span>客服微信：</span>
          <el-upload
            class="avatar-uploader"
            name="image"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="uploadImg"
          >
            <img v-if="set.customer_service" :src="set.customer_service" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </p>
        <p>
          <span>企业微信corpid：</span>
          <el-input v-model="set.wx_corpid"  type="text" size="large" placeholder="请输入内容" style="width:50%" />
        </p>
        <p>
          <span>企业微信url：</span>
          <el-input v-model="set.wx_url"  type="text" size="large" placeholder="请输入内容" style="width:50%" />
        </p>

      </div>

      <h4>余额提现协议：</h4>
      <div class="agreement">
        <WangEditor v-model="set.balance_withdrawal_explain" />
      </div>

      <h4>隐私政策：</h4>
      <div class="agreement">
        <WangEditor v-model="set.privacy_agreemen" />
      </div>

      <h4>用户协议：</h4>
      <div class="agreement">
        <WangEditor v-model="set.user_agreemen" />
      </div>

      <h4>关于我们：</h4>
      <div class="agreement">
        <WangEditor v-model="set.about_us" />
      </div>
      <!-- <div class="btn"><el-button type="primary" style="height:50px" @click="cre_user">创建虚拟用户账号</el-button></div> -->
    </div>
    <div class="btn"><el-button type="primary" style="height:50px" :loading="btnLoading" @click="save">立即保存</el-button></div>
  </div>
</template>

<script>
import { UPLOAD_URL } from '@/env'
import WangEditor from '@/components/wangEditor/wangEditor.vue'
export default {
  components: { WangEditor },
  data() {
    return {
      UPLOAD_URL,
      btnLoading: false,
      set: {
        withdrawal_min_price: '',
        withdrawal_fee_ratio: '',
        customer_service: '',
        balance_withdrawal_explain: '',
        privacy_agreemen: '',
        user_agreemen: '',
        about_us: '',
        contents:'',
        wx_corpid:'',
        is_recharge:'',
        is_withdrawal:'',
        wx_url:''
      }
    }
  },
  created() {
    this.getSetData()
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    //创建虚拟号
    cre_user(){
      this.$request.post('/admin/cet_user').then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        }
      }).catch()
    },
    getSetData() {
      this.$request.post('/admin/setting').then(res => {
        if (res.code == 200) {
          const { withdrawal_min_price, contents,wx_corpid,wx_url,is_recharge,is_withdrawal,withdrawal_fee_ratio, customer_service, balance_withdrawal_explain, privacy_agreemen, user_agreemen, about_us } = res.data
          this.set = { withdrawal_min_price: parseFloat(withdrawal_min_price), withdrawal_fee_ratio: parseFloat(withdrawal_fee_ratio), customer_service, balance_withdrawal_explain, privacy_agreemen, user_agreemen, about_us,contents,wx_corpid,wx_url,is_withdrawal,is_recharge }
        }
      }).catch()
    },
    uploadImg(res) {
      if (res.code == 200) {
        this.set.customer_service = res.data.path
      } else {
        this.$message.error(res.msg)
      }
    },
    save() {
      this.btnLoading = true
      this.$request.post('/admin/setting/save', this.set).then(res => {
        this.btnLoading = false
        if (res.code == 200) {
          this.$message.success(res.msg)
        }
      }).catch(_ => { this.btnLoading = false })
    }
  }
}
</script>

<style scoped>
    .container /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .container /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .container /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: auto;
    display: block;
  }
</style>
<style lang="scss" scoped>
    .container{
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .con{
      width: 100%;
      height: calc(100% - 80px);
      padding: 20px;
      overflow-y: scroll;
    }
    .con::-webkit-scrollbar { width: 0 !important }
    .btn{
        width: 100%;
        height: 80px;
        box-shadow: 0 2px 8px #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }
    h4{
        width: 100%;
        height: 50px;
        background-color: #f4f6f8;
        line-height: 50px;
        padding: 0 20px;
        color: #333;
        font-size: 15px;
    }
    .basic{
        width: 100%;
        padding: 20px;
        &>p{
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &>span{
                display: inline-block;
                width: 150px;
                text-align: right;
                font-size: 14px;
            }
        }
    }

    .agreement{
      width: calc(50% + 170px);
      padding: 20px;
    }
</style>
